<template>
  <view class="tabs">
    <scroll-view ref="tabbar1" id="tab-bar" class="tab-bar" :scroll="false" :scroll-x="true" :show-scrollbar="false"
      :scroll-into-view="scrollInto">
      <view style="flex-direction: column;">
        <view style="flex-direction: row;">
          <view class="uni-tab-item" v-for="(item,index) in classlist" :key="item.id" :id="item.id" :ref="'tabitem'+index"
            :data-id="item.id" :data-current="item.id" @click="changeclass(item.id)">
            <text class="uni-tab-item-title"
              :class="tabIndex==item.id ? 'uni-tab-item-title-active' : ''">{{item.classname}}</text>
          </view>
        </view>
        <view class="scroll-view-indicator">
          <view ref="underline" class="scroll-view-underline" :class="isTap ? 'scroll-view-animation':''"
            :style="{left: indicatorLineLeft + 'px', width: indicatorLineWidth + 'px'}"></view>
        </view>
      </view>
    </scroll-view>
    <view class="tab-bar-line"></view>
    <view class="news-list" v-if="datalist.length>0" v-for="(newsItem,index) in datalist" :key="index">
		<view class="media-item view" @click="view('article',newsItem.id)">
			<view class="view"
				:style="{flexDirection: 'row-reverse' }">
				
				<text class="media-title">{{newsItem.title}}</text>
				<view v-if="newsItem.pics.length>0 || newsItem.litpic" class="image-section flex-row"
					:class="{'image-section-right': newsItem.tid%2 === 0, 'image-section-left': newsItem.tid%2 === 1}">
					<image :fade-show="false" class="image-list1"
						
						v-if="newsItem.litpic" lazy-load="true"  :src="newsItem.litpic"></image>
					<template v-if="newsItem.pics.length>0">
						<image :fade-show="false" lazy-load="true"  class="image-list3" :src="source"
							v-for="(source, i) in newsItem.pics" :key="i" />
					</template>
				</view>
			</view>
			<view class="media-foot flex-row">
				<view class="media-info flex-row">
					<text class="info-text">{{newsItem.source}}</text>
					<text class="info-text">热度{{newsItem.hits}}</text>
					<text class="info-text">{{newsItem.addtime}}</text>
				</view>
				
			</view>
			<view class="media-item-line" style="position: absolute;"></view>
		</view>
	</view>
  </view>
</template>

<script>
	var config = require('../../common/util.js');

  export default {
    components: {
   
    },
    data() {
      return {
        classlist:[],
        tabIndex: 2,
        cacheTab: [],
        scrollInto: "",
        navigateFlag: false,
        indicatorLineLeft: 0,
        indicatorLineWidth: 0,
        isTap: false,
		pageNo:1,
		pageSize:10,
		datalist:[],
		currclass:[],
      }
    },
	onLoad() {
		this.getclass();
		this.getarticle();
		
	},
    onReady() {
     
    },
	onShow(){
		// #ifdef MP-BAIDU
		swan.setPageInfo({
			title: '新闻列表',
			keywords: '极致新闻资讯,极致新闻,资讯中心,最新资讯',
			description: '简单的资讯小程序，免费开源',
			articleTitle: '极致CMS资讯小程序',
			releaseDate: '2022-05-05 08:00:00',
			image: [
				this.currclass.litpic ? this.currclass.litpic : '/static/banner.png'
			],
			/*
			video: [{
				url: 'https://www.baidu.com/mx/v12.mp4',
				duration: '100',
				image: 'https://ms-static.cdn.bcebos.com/miniappdocs/img/image-scaleToFill.png'
			}],
			visit: {
				pv: '1000',
				uv: '100',
				sessionDuration: '130'
			},
			
			likes: '75',//点赞
			comments: '13',//评论
			collects: '23',//收藏
			shares: '8',//分享
			followers: '35',//关注
			*/
			success: res => {
				console.log('setPageInfo success', res);
			},
			fail: err => {
				console.log('setPageInfo fail', err);
			}
		})
		// #endif
	},
	// 自定义此页面的转发给好友(已经有全局的分享方法，此处会覆盖全局)
	onShareAppMessage(res) {
		return {
		  title: this.currclass.classname,
		  path: '/pages/news/newslist',
		  imageUrl: this.currclass.litpic ? this.currclass.litpic : '/static/banner.png'
		}
	  },
	  // 自定义页面的分享到朋友圈
	onShareTimeline(res) {
		return {
			title: this.currclass.classname,
			path: '/pages/news/newslist',
			imageUrl: this.currclass.litpic ? this.currclass.litpic : '/static/banner.png'
		}
	},
    methods: {
		changeclass(tid){
			this.tabIndex = tid;
			this.pageNo = 1;
			this.datalist = [];
			this.getarticle();
		},
		getclass(){
			var that = this;
			uni.request({
				  url: config.webapi+'/getData/getclass',
				  data: {
						  key:config.apikey,
						  model:'classtype',
						  id:2,
						  isall:1
					  },
				  success: (res) => {
					 // console.log(res.data);
					  if(res.data.code!=0){
						  uni.showToast({
							title: res.data.msg,
							duration: 2000,
							icon :'error'
						  });
					  }
					  let len = res.data.data.length;
					  var currclass = [];
					  
					  for(var i=0;i<len;i++){
						  if(res.data.data[i].litpic){
							  res.data.data[i].litpic = res.data.data[i].litpic.indexOf('http')>-1 ? res.data.data[i].litpic : config.filepath+res.data.data[i].litpic;
							  	 
						  }
						  if(parseInt(res.data.data[i].id)==parseInt(that.tabIndex)){
							  currclass = res.data.data[i];
						  }
						  
						
					  }
					 that.currclass = currclass;
					 that.classlist = res.data.data;
					 
					
					 
				  },
			})
		},
		getarticle(){
			var that = this;
			uni.request({
				  url: config.webapi+'/getData/getDataPage',
				  data: {
						  key:config.apikey,
						  model:'article',
						  tid:this.tabIndex,
						  isall:1,
						  isshow:1,
						  page:this.pageNo,
						  limit:this.pageSize,
					  },
				  success: (res) => {
					 // console.log(res.data);
					  if(res.data.code!=0){
						  uni.showToast({
							title: res.data.msg,
							duration: 2000,
							icon :'error'
						  });
					  }
					  if(res.data.data.length==0){
						  uni.showToast({
							title: '没有了',
							duration: 2000,
							icon :'error'
						  });
						  return ;
					  }
					  let len = res.data.data.length;
					  for(var i=0;i<len;i++){
						  if(res.data.data[i].litpic){
							  res.data.data[i].litpic = res.data.data[i].litpic.indexOf('http')>-1 ? res.data.data[i].litpic : config.filepath+res.data.data[i].litpic;
							 						 
						  }
						  var pictures = [];
						  if(res.data.data[i].pictures){
							  var p = res.data.data[i].pictures.split('||');
							  for(var j=0;j<p.length;j++){
								  pictures.push(p[j]);
							  }
							  
						  }
						  res.data.data[i].pics = pictures;
						  res.data.data[i].addtime = config.getLocalTime(res.data.data[i].addtime)
						  that.datalist.push(res.data.data[i]);					  
						
					  }
					
					
					 
				  },
			})
		},
		view(model,id){
			uni.navigateTo({
				url: '/pages/detail?model='+model+'&id='+id
			});
		},
		
		
     
    },
	onPullDownRefresh() {
			console.log('refresh');
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 1000);
			this.pageNo = 1;
			this.getarticle();
		},
	onReachBottom(){
		console.log('bottom');
		this.pageNo = parseInt(this.pageNo)+1;
		this.getarticle();
		
	},
  }
</script>

<style scoped>
  /* #ifndef APP-PLUS */
  page {
    width: 100%;
    min-height: 100%;
    display: flex;
  }

  /* #endif */

  .tabs {
    flex: 1;
    flex-direction: column;
    overflow: hidden;
    background-color: #ffffff;
    /* #ifdef MP-ALIPAY || MP-BAIDU */
    width: 100%;
    /* #endif */
  }

  .tab-bar {
    /* #ifdef APP-PLUS */
    width: 750rpx;
    /* #endif */
    height: 42px;
    flex-direction: row;
    /* #ifndef APP-PLUS */
    white-space: nowrap;
    /* #endif */
  }

  /* #ifndef APP-NVUE */
  .tab-bar ::-webkit-scrollbar {
    display: none;
    width: 0 !important;
    height: 0 !important;
    -webkit-appearance: none;
    background: transparent;
  }

  /* #endif */

  .scroll-view-indicator {
    position: relative;
    height: 2px;
    background-color: transparent;
  }

  .scroll-view-underline {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 0;
    background-color: #007AFF;
  }

  .scroll-view-animation {
    transition-duration: 0.2s;
    transition-property: left;
  }

  .tab-bar-line {
    height: 1px;
    background-color: #cccccc;
  }

  .tab-box {
    flex: 1;
  }

  .uni-tab-item {
    /* #ifndef APP-PLUS */
    display: inline-block;
    /* #endif */
    flex-wrap: nowrap;
    padding-left: 20px;
    padding-right: 20px;
  }

  .uni-tab-item-title {
    color: #555;
    font-size: 15px;
    height: 40px;
    line-height: 40px;
    flex-wrap: nowrap;
    /* #ifndef APP-PLUS */
    white-space: nowrap;
    /* #endif */
  }

  .uni-tab-item-title-active {
    color: #007AFF;
  }

  .swiper-item {
    flex: 1;
    flex-direction: column;
  }

  .page-item {
    flex: 1;
    flex-direction: row;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
  }
  .view {
  	flex-direction: column;
  }
  
  .flex-row {
  	flex-direction: row;
  }
  
  .flex-col {
  	flex-direction: column;
  }
  
  .list-cell {
  	padding: 0 15px;
  }
  
  .uni-list-cell-hover {
  	background-color: #eeeeee;
  }
  
  .media-item {
  	position: relative;
  	flex: 1;
  	flex-direction: column;
  	padding: 10px 15px 10px 15px;
  }
  
  .media-item-line {
  	position: absolute;
  	left: 15px;
  	right: 15px;
  	bottom: 0;
  	height: 1px;
  	background-color: #ebebeb;
  }
  
  .media-image-right {
  	flex-direction: row;
  }
  
  .media-image-left {
  	flex-direction: row-reverse;
  }
  
  .media-title {
  	flex: 1;
  }
  
  .media-title {
  	lines: 3;
  	text-overflow: ellipsis;
  	font-size: 15px;
  	color: #555555;
  }
  
  .media-title2 {
  	flex: 1;
  	margin-top: 3px;
  	line-height: 20px;
  }
  
  .image-section {
  	margin-top: 10px;
  	flex-direction: row;
  	justify-content: space-between;
  }
  
  .image-section-right {
  	margin-top: 0;
  	margin-left: 5px;
  	width: 112px;
  /* 	height: 73px; */
  }
  
  .image-section-left {
  	margin-top: 0;
  	margin-right: 5px;
  	width: 112px;
  	/* height: 73px; */
  }
  
  .image-list1 {
  	height: 240px;
  }
  
  .image-list2 {
  	width: 112px;
  	height: 73px;
  }
  
  .image-list3 {
  	width: 112px;
  	height: 73px;
  }
  
  .media-info {
  	flex-direction: row;
  	align-items: center;
  }
  
  .info-text {
  	margin-right: 10px;
  	color: #999999;
  	font-size: 12px;
  }
  
  .media-foot {
  	margin-top: 12px;
  	flex-direction: row;
  	align-items: center;
  	justify-content: space-between;
  }
  
  .close-view {
  	position: relative;
  	align-items: center;
  	flex-direction: row;
  	width: 20px;
  	height: 15px;
  	line-height: 15px;
  	border-width: 1upx;
  	border-style: solid;
  	border-color: #aaaaaa;
  	border-radius: 4px;
  	justify-content: center;
  	text-align: center;
  }
  
  .close-l {
  	position: absolute;
  	width: 9px;
  	height: 1px;
  	background-color: #aaaaaa;
  }
  
  .close-h {
  	transform: rotate(45deg);
  }
  
  .close-v {
  	transform: rotate(-45deg);
  }
</style>
